<!--本地播放器播放-->
<template>
  <div style="height: 100%;background: #0d0c22">
    <!--电影播放界面-->
    <v-row class="movie-container">
      <v-col md="9" cols="12">
        <video
            id="my-video"
            class="video-js vjs-default-skin vjs-fluid"
            controls
            preload="auto"
            autoplay="true"
            data-setup="{fluid: true}"
        >
          <!--            :poster="movieData.movieCover"-->
          <source src="" type="application/x-mpegURL"/>
        </video>
      </v-col>
      <v-col md="3" cols="12">
        <!-- 电影详情-->
        <div class="movie-details">
          <h1>{{ movieData.name }}</h1>
          <img :src=movieData.movieCover height="150em" style="text-align:center">
          <div class="spread-box" :style="{'-webkit-line-clamp': isOpen ? '': '4'}">
            {{movieData.content}}
          </div>
          <el-button type="text" v-show="isOpen === false" @click="isOpen=!isOpen" icon="el-icon-arrow-down">展开详情</el-button>
          <el-button type="text" v-show="isOpen === true" @click="isOpen=!isOpen" icon="el-icon-arrow-up">收起详情</el-button>
          <!--评分-->
          <div class="rate">
            <el-rate
                v-model="movieData.rate"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}">
            </el-rate>
            已有{{ movieData.rateCount }}个人评分
            <el-popover
                placement="top"
                width="160"
                v-model="visible">
              <el-rate
                  v-model="userRate"
                  :colors="colors">
              </el-rate>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="visible = false">取消</el-button>
                <el-button type="primary" size="mini" @click="toRate">确定</el-button>
              </div>
              <el-button class="button" slot="reference">我要评分</el-button>
            </el-popover>

          </div>
        </div>
      </v-col>
    </v-row>
    <!-- 评论 -->
    <v-card class="article-wrapper" style="margin-top: 20px">
      <comment :type="commentType" @getCommentCount="getCommentCount"/>
    </v-card>
  </div>
</template>

<script>
import 'video.js/dist/video-js.css'
import videojs from "video.js";
import "videojs-contrib-hls";
import Comment from "@/components/Comment";

export default {
  components: {
    Comment
  },
  data() {
    return {
      movieData: {
        url: '',
      },
      commentType: 4,
      commentCount: 0,
      userRate: null,
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
      visible: false,
      isOpen: false,//默认折叠
    };
  },

  created() {
    this.getVideoMsg()
  },
  methods: {
    getVideoMsg() {
      this.axios.get("/api/movies/listDetails", {
        params: {
          id: this.$route.params.movieId,
        }
      }).then(({data}) => {
        this.movieData = data.data;
        const count = (this.movieData.content  && this.movieData.content .replace('/[^\x00-\xff]/g', "xx").length) || 0;
        if (count > 170) {
          this.isOpen = false;
        }
        var myPlayer = videojs("my-video");
        myPlayer.src([
          {
            type: "application/x-mpegURL",
            src: this.movieData.url
          }
        ]);
        myPlayer.play();
      });
    },
    getVideo() {
      videojs(
          "my-video",
          {
            bigPlayButton: false,
            textTrackDisplay: false,
            posterImage: true,
            errorDisplay: false,
            controlBar: true
          },
          function () {
            this.play();
          }
      );
    },
    getCommentCount(count) {
      this.commentCount = count;
    },
    //为电影评分
    toRate() {
      //判断用户是否登录
      if (!this.$store.state.userId) {
        this.$store.state.loginFlag = true;
        return false;
      }
      this.axios.post("/api/movies/toRate", {
        id: this.movieData.id,
        userRate: this.userRate,
      }).then(({data}) => {
        if (data.code == 20000) {
          this.$toast({type: "success", message: "评分成功！"});
          this.getVideoMsg()
        } else {
          this.$toast({type: "error", message: data.message});
        }
        this.visible = false;
      });
    }
  },
  mounted() {
    this.getVideo();
  },

};
</script>

<style lang="scss" scoped>
.movie-details {
  text-align: center;
  vertical-align: middle;
  position: sticky;
  top: 20px;

  p {
    margin: 10px;
    text-align: left;
  }

  .rate {
    text-align: left;
  }

  .spread-box {
    // 多行文本溢出显示省略号(有兼容性问题):
    // 控制好盒子大小
    // 溢出隐藏
    overflow: hidden;
    // 显示省略符号来代表被修剪的文本
    text-overflow: ellipsis;
    // 弹性伸缩盒子模型显示
    display: -webkit-box;
    // 限制在一个块元素显示的文本的行数(已写在行内样式)
    // -webkit-line-clamp: 4;
    // 设置或检索伸缩盒对象的子元素的排列方式
    -webkit-box-orient: vertical;
  }
}

img {
  margin: 20px;
  vertical-align: middle
}

.movie-container {
  animation: main 1s;
  max-width: 2000px;
  margin: auto auto 40px auto !important;
  padding: 0 5px;
}

/* From uiverse.io */
.button {
  --glow-color: rgb(217, 176, 255);
  --glow-spread-color: rgba(191, 123, 255, 0.781);
  --enhanced-glow-color: rgb(231, 206, 255);
  --btn-color: rgb(100, 61, 136);
  border: .25em solid var(--glow-color);
  padding: 1em 3em;
  color: var(--glow-color);
  font-size: 8px;
  font-weight: bold;
  background-color: var(--btn-color);
  border-radius: 1em;
  outline: none;
  box-shadow: 0 0 1em .25em var(--glow-color),
  0 0 4em 1em var(--glow-spread-color),
  inset 0 0 .75em .25em var(--glow-color);
  text-shadow: 0 0 .5em var(--glow-color);
  position: relative;
  transition: all 0.3s;
  margin-top: 2em;
  margin-left: 2em;
}

.button::after {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 120%;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: var(--glow-spread-color);
  filter: blur(2em);
  opacity: .7;
  transform: perspective(1.5em) rotateX(35deg) scale(1, .6);
}

.button:hover {
  color: var(--btn-color);
  background-color: var(--glow-color);
  box-shadow: 0 0 1em .25em var(--glow-color),
  0 0 4em 2em var(--glow-spread-color),
  inset 0 0 .75em .25em var(--glow-color);
}

.button:active {
  box-shadow: 0 0 0.6em .25em var(--glow-color),
  0 0 2.5em 2em var(--glow-spread-color),
  inset 0 0 .5em .25em var(--glow-color);
}
</style>
